<template>
        <m-card :icon="icon" :title="title" >
            <a v-if="Ad" :href="Ad.herf" slot="ad"  >
                <img :src="Ad.img" alt="">
            </a>
            <div slot="body">
                 <div class="nav jc-between">
                    <div class="nav-item pb-1 px-1" 
                    v-for="(category,index) in Cats" :key="index"
                    :class="{active:index === currentIndex}"
                    @click="$refs.list.swiper.slideTo(index)">
                        <div class="nav-link">{{category.name}}</div>
                    </div>
                </div>
                <swiper ref="list"  :options="{autoHeight:true}"
                @slide-change = "currentIndex = $refs.list.swiper.realIndex">
                    <swiper-slide v-for="(category,index) in Cats" :key="index">
                        <slot name="items" :category="category"></slot>
                    </swiper-slide>
                </swiper>
            </div>
        </m-card>
</template>

<script>

    export default {
        props:{
            title:{
                type:String,
                required:true
            },
            icon:{
                type:String,
                required:true
            },
            Cats:{
                type:Array,
                default(){
                    return []
                }
            },
            Ad:{
                type:Object
            }
        },
        data () {
            return {
                currentIndex: 0
            }
        }
    }
</script>

<style lang="scss" scoped>
@import 'assets/scss/_variables.scss';
.card-head{
    border-bottom: 1px solid rgb(212, 217, 222);
    height: 3.0769rem;
}
</style>